<template>
  <div class="collect">
    <div class="left">
      <div class="header" @click="closeFastCollect">
        <i class="el-icon-arrow-left"></i>
        <p>&nbsp;&nbsp;&nbsp;快速汇总结果</p>
      </div>
      <div class="countTable">
        <el-table
          size="mini"
          :data="tableData"
          style="width: 100%"
          highlight-current-row
          @row-click="checkedNumIden"
          ref="multipleTable"
          @select="checkedNumData"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="idenName" label="指标名称" width="120"></el-table-column>
          <el-table-column prop="count" label="汇总值"></el-table-column>
        </el-table>
      </div>
      <div class="btn-box">
        <el-button type="primary" @click="openTableLayer">浏览表格</el-button>
      </div>
    </div>

    <div class="right">
      <div class="header" :style="setWidth">
        <p>快速汇总类别：</p>
        <ul>
          <li
            v-for="(item,index) in iden_enu_data"
            v-if="item.idenName!='行业代码'&&item.idenName!='行业代码_11'"
            :class="selected.iden_enu_index==index?'active':''"
            @click="getEnuData(item,index)"
            :key="index"
          >
            <i class="el-icon-printer"></i>
            &nbsp;&nbsp;{{item.idenName}}
          </li>
        </ul>
      </div>
      <div class="chart-box">
        <div id="collect-chart-container"></div>
        <el-row
          v-show="changeEchartsStyle && selected.iden_enu_code != 'region'"
          class="echartsStyle"
        >
          <span class="pos fontClass" @click="initLineChart" title="折线图">
            <img src="../../images/line.png" alt="折线图" />
          </span>
          <span class="pos fontClass" @click="initBarChart" title="柱状图">
            <img src="../../images/bar.png" alt="柱状图" />
          </span>
          <span class="pos fontClass" @click="initPieChart('pie')" title="饼图">
            <img src="../../images/pie.png" alt="饼图" />
          </span>
          <span class="pos fontClass" @click="initPieChart('ring')" title="环形图">
            <img src="../../images/ring.png" alt="环形图" />
          </span>
          <span class="pos fontClass" @click="initPieChart('rose')" title="玫瑰图">
            <img src="../../images/rose.png" alt="玫瑰图" />
          </span>
        </el-row>
        <el-row
          v-show="changeEchartsStyleDouble && selected.iden_enu_code != 'region'"
          class="echartsStyle"
        >
          <span class="pos fontClass" @click="initLineBarChart" title="折线+柱状图">
            <img src="../../images/line_bar.png" alt="折线+柱状图" />
          </span>
          <span class="pos fontClass" @click="initDoubleBarChart" title="双折线图">
            <img src="../../images/line_d.png" alt="双折线图" />
          </span>
          <span class="pos fontClass" @click="initBarMuchChart()" title="多柱图">
            <img src="../../images/bar_b.png" alt="多柱图" />
          </span>
          <span class="pos fontClass" @click="initBarDJChart()" title="堆积图">
            <img src="../../images/bar_a.png" alt="堆积图" />
          </span>
          <span class="pos fontClass" @click="initPieRingChart()" title="饼图+环形图">
            <img src="../../images/nested_pies.png" alt="饼图+环形图" />
          </span>
        </el-row>
      </div>
    </div>
    <QueryTable v-if="showQueryTableLayer" :tableData="queryTableData"></QueryTable>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import axios from "axios";
import echarts from "echarts";
import QueryTable from "./table.vue";
import microConfig from "static/config/micro.js";
import sgisSpatialQuery from "@/utils/map/sfgis.spatial.query.js";
import regionUtils from "@/utils/map/sfgis.region.base.js";
import * as microAPI from "@/pages/micro/api/micro.js";
import "echarts/theme/macarons.js";
export default {
  name: "collect",
  props: ["selectedSearchParams"],
  components: { QueryTable },
  data() {
    return {
      changeEchartsStyleDouble: false,
      setWidth: {
        width: "1619px"
      },
      echartsData: {},
      queryTableData: {
        tableLegend: [
          { name: "类型", value: "ANAME",unit:"",idenType:4 },
          { name: "单位数量", value: "COUNT",unit:"个",idenType:2 }
        ],
        tableData: {},
        tableName: ""
      },
      changeEchartsStyle: false,
      echartsStyle: "pie",
      tableVisible: false,
      tableData: [],
      numData: [],
      myChart: null,

      iden_enu_data: [
        //所以枚举指标和对应的全部数据
        {
          idenName: "按行政区划汇总",
          idenCode: "region",
          data: []
        }
      ], //枚举数据
      selected: {
        //选中的数字指标和枚举指标
        iden_num_codes: [{ idenCode: "count", idenName: "单位数量", count: 0 }], //数字指标
        iden_enu_code: "region", //枚举指标
        iden_enu_index: 0 //选中的枚举指标索引
      },
      iden_num_codes: [], //所有的数字指标

      mapdata: {
        //地图数据
        saveMapData: [], //原始的区划地图数据
        filterMapData: [], //选中数字指标后的地图数据
        parentMapData: [] //父级区划地图数据
      },
      features: {}
    };
  },
  computed: {
    ...mapState({
      showFastCollectLayer: state => state.micro.showFastCollectLayer,
      showQueryTableLayer: state => state.micro.showQueryTableLayer
    })
  },
  watch: {
    selectedSearchParams(newval) {
      this.selectedSearchParams = newval;
    }
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {},
  methods: {
    ...mapMutations([
      "changeShowFastCollectLayer",
      "changeShowTypeTabLayer",
      "changeShowTableLayer",
      "changeShowQueryTableLayer"
    ]),
    closeFastCollect() {
      this.$store.commit("changeShowFastCollectLayer", false);
      this.$store.commit("changeShowTypeTabLayer", false);
    },
    init() {
      this.getMicroIden();
    },
    //查询基层指标
    getMicroIden() {
      let that = this;
      let req = {
        miid: this.selectedSearchParams.microid,
        iden_type: ""
      };
      microAPI
        .getSelectedTableIden(req)
        .then(res => {
          if (res.message == "success" && res.data.length > 0) {
            let data = res.data;
            for (let i in data) {
              if (data[i].idenType == 2) {
                //数字指标
                that.iden_num_codes.push(data[i].idenCode);
                that.numData.push(data[i]);
              }
              if (data[i].idenType == 4) {
                data[i].data = [];
                that.iden_enu_data.push(data[i]);
              }
            }
            if (that.numData.length) {
              that.numData.map(item => {
                that.queryTableData.tableLegend.push({
                  name: item.idenName,
                  value: item.idenCode,
                  unit:'',
                  idenType:item.idenType
                });
                return item;
              });
            }
            that.getSearchSum();
            that.getRegionSum();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getSearchSum() {
      let that = this;
      let iden_enu_code = [];
      iden_enu_code.push(that.iden_enu_data[1].idenCode);
      let iden_num_codes = [];
      if (
        that.selected.iden_num_codes.length > 1 &&
        that.selected.iden_num_codes[0].idenCode !== "count"
      ) {
        that.selected.iden_num_codes.map(item => {
          if (item.idenCode != "count") {
            iden_num_codes.push(item.idenCode);
          }
        });
      } else {
        iden_num_codes = that.iden_num_codes;
      }
      let req = {
        conditions: that.selectedSearchParams.conditions,
        iden_enu_code: iden_enu_code,
        iden_num_codes: iden_num_codes,
        isRegion: "false",
        microId: that.selectedSearchParams.microid,
        msConditions: that.selectedSearchParams.msConditions || [],
        periods: that.selectedSearchParams.periods,
        rcid: that.selectedSearchParams.regions.rcid,
        regions: that.selectedSearchParams.regions.regionArr
      };
      that.querySum(req, function(data) {});
    },
    getRegionSum() {
      let that = this;
      let iden_enu_code = [];
      let iden_num_codes = [];
      if (
        that.selected.iden_num_codes.length > 1 &&
        that.selected.iden_num_codes[0].idenCode !== "count"
      ) {
        that.selected.iden_num_codes.map(item => {
          if (item.idenCode != "count") {
            iden_num_codes.push(item.idenCode);
          }
        });
      } else {
        iden_num_codes = that.iden_num_codes;
      }
      //设置区划代码
      // let subRegionLevel = 3;
      // if (
      //   (that.selectedSearchParams.regions.length =
      //     1 && that.selectedSearchParams.regions.regionArr[0].regionLevel < 7)
      // ) {
      //   subRegionLevel =
      //     +that.selectedSearchParams.regions.regionArr[0].regionLevel + 1;
      // } else {
      //   subRegionLevel = +that.selectedSearchParams.regions.regionArr[0]
      //     .regionLevel;
      // }
      let subRegionLevel = that.selectedSearchParams.regions.regionArr[0].regionLevel;
      let req = {
        conditions: that.selectedSearchParams.conditions,
        iden_enu_code: iden_enu_code,
        iden_num_codes: iden_num_codes,
        isRegion: "true",
        microId: that.selectedSearchParams.microid,
        msConditions: that.selectedSearchParams.msConditions || [],
        periods: that.selectedSearchParams.periods,
        rcid: that.selectedSearchParams.regions.rcid,
        regions: that.selectedSearchParams.regions.regionArr,
        subRegionLevel: subRegionLevel
      };
      that.querySum(req, function(data) {
        if (that.selected.iden_num_codes.length == 1) {
          that.mapdata.saveMapData = data;
          that.queryTableData.tableData = data;
          that.queryTableData.tableName = "按行政区划汇总";
          that.initMapData();
          that.initTableData(data);
        }
      });
    },
    querySum(req, callback) {
      let that = this;
      axios({
        url: microConfig.summarySearch,
        method: "post",
        params: {
          microId: req.microId
        },
        data: req
      })
        .then(function(response) {
          if (
            response.data.message == "success" ||
            response.data.message == "String index out of range: -1"
          ) {
            let data = response.data.data;
            callback(data);
          } else {
            if (response.data.message != "String index out of range: -1") {
              that.$message({
                message: response.data.message,
                type: "error"
              });
            }
            return;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    initTableData(data) {
      let that = this;
      let result = [];
      let arr = data;
      result = [];
      let all = 0;
      for (let i = 0; i < arr.length; i++) {
        all += arr[i]["COUNT"];
      }
      result.push({
        idenName: "单位数量",
        idenCode: "count",
        count: all
      });

      for (let j = 0; j < that.numData.length; j++) {
        let iden = 0;
        let idenC = that.numData[j].idenCode;
        for (let i = 0; i < arr.length; i++) {
          iden += Number(arr[i][idenC]);
        }
        that.numData[j].count = iden;
        result.push(that.numData[j]);
      }
      this.tableData = this.tableData.length ? this.tableData : result;
      setTimeout(() => {
        this.$refs.multipleTable.toggleRowSelection(this.tableData[0]);
      }, 500);
    },
    initMapData() {
      let that = this;
      let data = that.mapdata.saveMapData;
      let mapdata = [];
      that.mapdata.parentMapData = [];
      if (
        that.selected.iden_num_codes[0].idenCode == "count" ||
        !that.selected.iden_num_codes[0].idenCode
      ) {
        that.selected.iden_num_codes[0].idenCode = "COUNT";
      }
      that.selectedSearchParams.regions.regionArr.map(item => {
        let obj = {};
        obj.name = item.regionName;
        obj.regioncode = item.regionCode;
        obj.regiontype = "1";
        that.mapdata.parentMapData.push(obj);
      });
      for (let i in data) {
        let obj = {
          regioncode: data[i].CODE,
          name: data[i].NAME,
          value: data[i][that.selected.iden_num_codes[0].idenCode],
          regiontype: "1",
          data: {}
        };
        if (that.selected.iden_num_codes[0].idenCode == "COUNT") {
          obj.data["单位数量"] =
            data[i][that.selected.iden_num_codes[0].idenCode];
          that.mapdata.title = "单位数量";
        } else {
          for (let j in that.numData) {
            if (
              that.numData[j].idenCode ==
              that.selected.iden_num_codes[0].idenCode
            ) {
              obj.data[that.numData[j].idenName] =
                data[i][that.numData[j].idenCode];
              that.mapdata.title = that.numData[j].idenName;
            }
          }
        }
        mapdata.push(obj);
      }
      that.mapdata.filterMapData = mapdata;
      that.initMapChart();
    },
    //选中枚举指标
    getEnuData(enu, index) {
      let that = this;
      that.queryTableData.tableName = enu.idenName;
      that.selected.iden_enu_index = index;
      that.selected.iden_enu_code = enu.idenCode;
      if (that.selected.iden_enu_code == "region") {
        //判断是否为区划
        that.queryTableData.tableData = that.mapdata.saveMapData;
        that.initMapChart();
        that.changeEchartsStyleDouble = false;
        that.changeEchartsStyle = false;
      } else {
        if (that.selected.iden_num_codes.length == 1) {
          that.changeEchartsStyle = true;
          that.changeEchartsStyleDouble = false;
        } else {
          that.changeEchartsStyle = false;
          that.changeEchartsStyleDouble = true;
        }
        if (that.selected.iden_enu_code) {
          for (let i = 0; i < that.iden_enu_data.length; i++) {
            if (that.iden_enu_data[i].idenCode == that.selected.iden_enu_code) {
              if (that.iden_enu_data[i].data.hasOwnProperty("data")) {
                //已经有数据不再重复请求
                if (that.selected.iden_num_codes.length == 1) {
                  that.initChartData(that.iden_enu_data[i].data);
                  that.queryTableData = that.iden_enu_data[i].data;
                }
              } else {
                //将该枚举分组下所有的数字指标数据取完整
                let enu_code = [];
                enu_code.push(that.selected.iden_enu_code);
                let req = {
                  conditions: that.selectedSearchParams.conditions,
                  iden_enu_code: enu_code,
                  iden_num_codes: that.iden_num_codes,
                  isRegion: "false",
                  microId: that.selectedSearchParams.microid,
                  msConditions: that.selectedSearchParams.msConditions || [],
                  periods: that.selectedSearchParams.periods,
                  rcid: that.selectedSearchParams.regions.rcid,
                  regions: that.selectedSearchParams.regions.regionArr
                };
                that.querySum(req, function(data) {
                  that.iden_enu_data[i].data = data;
                  that.initChartData(data, index);
                  that.queryTableData.tableData = data;
                });
              }
            }
          }
        }
      }
    },
    checkedNumData(selection, row) {
      if (selection.length > 2) {
        this.selected.iden_num_codes = [];
        this.$refs.multipleTable.toggleRowSelection(selection[0], false);
        selection.map((item, index) => {
          if (index) {
            this.selected.iden_num_codes.push(item);
          }
        });
      }
      if (selection.length <= 2) {
        this.selected.iden_num_codes = [];
        selection.map(item => {
          this.selected.iden_num_codes.push(item);
        });
      }
      let num_codes = this.selected.iden_num_codes;
      this.checkedNum(num_codes, row);
    },
    //选中数字指标
    checkedNumIden(currentRow) {
      let that = this;
      let isChecked = false;
      if (that.selected.iden_num_codes.length < 2) {
        that.$refs.multipleTable.toggleRowSelection(currentRow);
        that.selected.iden_num_codes.push(currentRow);
      } else {
        that.selected.iden_num_codes.map(item => {
          if (item.idenName == currentRow.idenName) {
            isChecked = true;
          }
        });
        if (isChecked) {
          that.$refs.multipleTable.toggleRowSelection(currentRow);
          that.selected.iden_num_codes.map((item, index) => {
            if (item.idenName == currentRow.idenName) {
              that.selected.iden_num_codes.splice(index, 1);
            }
          });
        } else {
          let obj = that.selected.iden_num_codes.shift();
          if (obj.idenCode == "COUNT") {
            that.$refs.multipleTable.toggleRowSelection(
              that.tableData[0],
              false
            );
          }
          that.selected.iden_num_codes.push(currentRow);
          that.$refs.multipleTable.toggleRowSelection(currentRow);
          that.$refs.multipleTable.toggleRowSelection(obj, false);
        }
      }
      let num_codes = that.selected.iden_num_codes;
      that.checkedNum(num_codes, currentRow);
    },
    checkedNum(num_codes, currentRow) {
      let that = this;
      let title = [];
      if (num_codes.length == 1) {
        that.changeEchartsStyle = true;
        that.changeEchartsStyleDouble = false;
      } else {
        that.changeEchartsStyle = false;
        that.changeEchartsStyleDouble = true;
      }
      num_codes.map(item => {
        title.push(item.idenName);
      });
      that.echartsData.title = num_codes.idenName;
      if (that.selected.iden_enu_code != "region") {
        for (let i = 0; i < that.iden_enu_data.length; i++) {
          if (that.iden_enu_data[i].idenCode == that.selected.iden_enu_code) {
            if (that.iden_enu_data[i].data.length) {
              //已经有数据不再重复请求
              that.initChartData(that.iden_enu_data[i].data, i, currentRow);
            }
          }
        }
      } else {
        that.initMapData();
      }
    },
    initChartData(data, index, num) {
      let that = this;
      let req = {
        mid: that.iden_enu_data[index].identid,
        vid: that.iden_enu_data[index].identVersion
      };
      let result = {
        title: "",
        legendData: [],
        data: []
      };
      microAPI.selectRoot(req).then(res => {
        let arr = res.data;
        if (that.selected.iden_num_codes && that.selected.iden_enu_code) {
          for (let i = 0; i < arr.length; i++) {
            if (
              that.selected.iden_num_codes[0].idenCode == "count" ||
              that.selected.iden_num_codes[0].idenCode == "COUNT"
            ) {
              //单位数量
              let idenname = "COUNT";
              result.title = "单位数量";
              result.legendData.push(arr[i].name);
              result.data.push({ value: 0, name: arr[i].name });
              if (data.length) {
                data.map((item, index) => {
                  if (item.ACODE === arr[i].code) {
                    result.data[i].value = item.COUNT;
                  }
                  return item;
                });
              }
            } else {
              for (let j in that.numData) {
                if (
                  that.numData[j].idenCode ==
                  that.selected.iden_num_codes[0].idenCode
                ) {
                  result.title = that.numData[j].idenName;
                }
              }

              let idenname = that.selected.iden_num_codes[0].idenCode;
              //数字指标被选中
              result.legendData.push(arr[i].name);
              result.data.push({
                name: arr[i].name,
                value: 0
              });
              if (data.length) {
                data.map((item, index) => {
                  if (item.ACODE === arr[i].code) {
                    result.data[i].value =
                      item[that.selected.iden_num_codes[0].idenCode];
                  }
                  return item;
                });
              }
            }
          }
          that.echartsData = result;
          if (that.selected.iden_num_codes.length == 1) {
            that.initPieChart("pie");
          } else {
            that.initLineBarChart();
          }
        }
      });
    },
    //折线图+柱状图
    initLineBarChart() {
      let data = this.echartsData;
      let legend = [];
      let xAxisData = [];
      let yAxisData = [];
      let seriesData = [{ type: "line", yAxisIndex: 1 }, { type: "bar" }];
      this.selected.iden_num_codes.map((item, index) => {
        legend.push(item.idenName);
        yAxisData.push({ type: "value", name: item.idenName });
        seriesData[index].name = item.idenName;
        seriesData[index].barMaxWidth = "100";
        if (item.idenCode != "count") {
          seriesData[index].idenCode = item.idenCode;
        } else {
          seriesData[index].idenCode = "COUNT";
        }
      });
      this.queryTableData.tableData.map(ite => {
        xAxisData.push(ite.ANAME);
      });
      seriesData.map(item => {
        let data = [];
        this.queryTableData.tableData.map(ite => {
          if (ite[item.idenCode] == undefined || ite[item.idenCode] == "-") {
            data.push(0);
          } else {
            data.push(ite[item.idenCode]);
          }
        });
        item.data = data;
      });
      let option = {
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          right: 80,
          top: 10,
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          top: 100,
          bottom: 100
        },
        legend: {
          data: legend,
          top: 30
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData
          }
        ],
        yAxis: yAxisData,
        series: seriesData
      };
      this.renderChart(option);
    },
    //双折线图
    initDoubleBarChart() {
      let data = this.echartsData;
      let legend = [];
      let xAxisData = [];
      let yAxisData = [];
      let seriesData = [];
      this.selected.iden_num_codes.map((item, index) => {
        let obj = {};
        legend.push(item.idenName);
        yAxisData.push({ type: "value", name: item.idenName });
        obj.name = item.idenName;
        obj.type = "line";
        if (item.idenCode != "count") {
          obj.idenCode = item.idenCode;
        } else {
          obj.idenCode = "COUNT";
        }
        seriesData.push(obj);
      });
      this.queryTableData.tableData.map(ite => {
        xAxisData.push(ite.ANAME);
      });
      seriesData.map((item, index) => {
        let data = [];
        this.queryTableData.tableData.map(ite => {
          if (ite[item.idenCode] == undefined || ite[item.idenCode] == "-") {
            data.push(0);
          } else {
            data.push(ite[item.idenCode]);
          }
        });
        item.data = data;
      });
      let option = {
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          right: 80,
          top: 10,
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          top: 100,
          bottom: 100
        },
        legend: {
          data: legend,
          top: 30
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData
          }
        ],
        yAxis: yAxisData,
        series: seriesData
      };
      this.renderChart(option);
    },
    //多柱图
    initBarMuchChart() {
      let data = this.echartsData;
      let legend = [];
      let xAxisData = [];
      let yAxisData = [];
      let seriesData = [];
      this.selected.iden_num_codes.map((item, index) => {
        let obj = {};
        legend.push(item.idenName);
        yAxisData.push({ type: "value", name: item.idenName });
        obj.name = item.idenName;
        if (item.idenCode != "count") {
          obj.idenCode = item.idenCode;
        } else {
          obj.idenCode = "COUNT";
        }
        obj.type = "bar";
        seriesData.push(obj);
      });
      this.queryTableData.tableData.map(ite => {
        xAxisData.push(ite.ANAME);
      });
      seriesData.map((item, index) => {
        let data = [];
        this.queryTableData.tableData.map(ite => {
          if (ite[item.idenCode] == undefined || ite[item.idenCode] == "-") {
            data.push(0);
          } else {
            data.push(ite[item.idenCode]);
          }
        });
        item.data = data;
      });
      let option = {
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          right: 80,
          top: 10,
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          top: 100,
          bottom: 100
        },
        legend: {
          data: legend,
          top: 30
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData
          }
        ],
        yAxis: yAxisData,
        series: seriesData
      };
      this.renderChart(option);
    },
    //环形图+饼图
    initPieRingChart() {
      let legend = this.queryTableData.legendData;
      let seriesData = [
        { type: "pie", radius: [0, "45%"] },
        { type: "pie", radius: ["50%", "55%"] }
      ];
      this.selected.iden_num_codes.map((item, index) => {
        let data = [];
        seriesData[index].name = item.idenName;
        if (item.idenCode != "count") {
          seriesData[index].idenCode = item.idenCode;
        } else {
          item.idenCode = "COUNT";
        }
        // seriesData[index].idenCode = item.idenCode;
        seriesData[index].label = { show: false };
        this.queryTableData.tableData.map(ite => {
          if (ite[item.idenCode] == undefined || ite[item.idenCode] == "-") {
            data.push({ name: ite.ANAME, value: 0 });
          } else {
            data.push({ name: ite.ANAME, value: ite[item.idenCode] });
          }
        });
        seriesData[index].data = data;
      });
      let option = {
        toolbox: {
          right: 80,
          top: 10,
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          top: 100,
          bottom: 100
        },
        legend: {
          data: legend,
          top: 40
        },
        tooltip: {
          trigger: "item"
        },
        series: seriesData
      };
      this.renderChart(option);
    },
    initPieChart(type) {
      let data = this.echartsData;
      let radius = [0, "55%"];
      let roseType = false;
      if (type == "ring") {
        radius = ["45%", "55%"];
      }
      if (type == "rose") {
        roseType = true;
      }
      let legendSelector = {};
      if (data.data.length) {
        data.data.map(item => {
          if (item.value == "0") {
            legendSelector[item.name] = false;
          } else {
            legendSelector[item.name] = true;
          }
        });
      }
      var option = {
        title: {
          text: data.title,
          subtext: "快速汇总",
          x: "center",
          top: "20"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        toolbox: {
          right: 80,
          top: 10,
          feature: {
            saveAsImage: {}
          }
        },
        legend: {
          orient: "vertical",
          left: "20",
          top: "20",
          data: data.legendData,
          selected: legendSelector
        },
        series: [
          {
            name: data.title,
            type: "pie",
            radius: radius,
            center: ["50%", "60%"],
            label: {
              show: true
            },
            data: data.data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            roseType: roseType
          }
        ]
      };
      this.renderChart(option);
    },
    //打开表格层
    openTableLayer() {
      this.$store.commit("changeShowQueryTableLayer", true);
      this.$store.commit("changeShowTypeTabLayer", true);
      let typetabstyle = {
        width: "100vw",
        left: "0",
        activeName: "table"
      };
    },
    initLineChart() {
      let data = this.echartsData;
      let seriesData = [];
      if (data.data) {
        data.data.map(item => {
          seriesData.push(item.value);
        });
      }
      var option = {
        title: {
          text: data.title,
          subtext: "快速汇总",
          x: "center",
          top: "20"
        },
        grid: {
          top: 100,
          bottom: 100
        },
        toolbox: {
          right: 80,
          top: 10,
          feature: {
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: data.legendData
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: seriesData,
            type: "line"
          }
        ]
      };
      this.renderChart(option);
    },
    initBarChart() {
      let data = this.echartsData;

      let seriesData = [];
      if (data.data) {
        data.data.map(item => {
          seriesData.push(item.value);
        });
      }
      var option = {
        title: {
          text: data.title,
          subtext: "快速汇总",
          x: "center",
          top: "20"
        },
        grid: {
          top: 100,
          bottom: 100
        },
        toolbox: {
          right: 80,
          top: 10,
          feature: {
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: data.legendData
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: seriesData,
            type: "bar",
            barMaxWidth: "100"
          }
        ]
      };
      this.renderChart(option);
    },
    initBarDJChart() {
      let data = this.queryTableData;
      let xAxisData = [];
      let series = [];
      let legend = [];
      setTimeout(() => {
        this.selected.iden_num_codes.map(item => {
          legend.push(item.idenName);
          let obj = {};
          xAxisData = [];
          obj.name = item.idenName;
          obj.type = "bar";
          obj.data = [];
          obj.stack = '总量'
          data.tableData.map(ite => {
            xAxisData.push(ite.ANAME);
            obj.data.push(ite[item.idenCode]);
          });
          series.push(obj);
        });
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: legend,
            top: 30
          },
          toolbox: {
            right: 80,
            top: 10,
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            top: 100,
            bottom: 100
          },
          yAxis: {
            type: "value"
          },
          xAxis: {
            type: "category",
            data: xAxisData
          },
          series: series
        };
        this.renderChart(option);
      }, 300);
    },
    initMapChart() {
      let that = this;
      that.addFeatures(that.mapdata.parentMapData);
    },
    renderChart(option) {
      this.myChart = echarts.dispose(
        document.getElementById("collect-chart-container")
      );
      this.myChart = echarts.init(
        document.getElementById("collect-chart-container"),
        "macarons"
      );
      this.myChart.setOption(option);
    },
    addFeatures(values) {
      let valueTemp = {};
      let regioninfos = [];
      for (let i = 0; i < values.length; i++) {
        // 每一百个区划叠加一次，不一次性查询出来，村的边界数据太大
        let regioncode = values[i].regioncode;
        let value = values[i].name;
        let regiontype = values[i].regiontype;
        valueTemp[regioncode] = value;
        let regionInfo = {
          regioncode: regioncode,
          regiontype: regiontype
        };
        regioninfos.push(regionInfo);
        if (i > 0 && i % 100 === 0) {
          this.queryFeatures(valueTemp, regioninfos);
          valueTemp = {};
          regioninfos = [];
        }
      }
      if (valueTemp !== null && !$.isEmptyObject(valueTemp)) {
        this.queryFeatures(valueTemp, regioninfos);
      }
    },
    queryFeatures(codeData, regioninfos) {
      let that = this;
      let regioninfo = regioninfos;
      let regiontype = regioninfo[0].regiontype;
      // let level =
      //   that.selectedSearchParams.regions.length > 1 || that.selectedSearchParams.regions.regionArr[0].regionLevel >= 7 
      //     ? +that.selectedSearchParams.regions.regionArr[0].regionLevel
      //     : Number(that.selectedSearchParams.regions.regionArr[0].regionLevel) +
      //       1;

      let level =that.selectedSearchParams.regions.regionArr[0].regionLevel;
      let features = {};
      regioninfos.map(item => {
        let obj = {};
        obj.regioncode = regionUtils.regionUtils.getPrefixCode(item.regioncode);
        obj.type = "1";
        regioninfos.push(obj);
        return item;
      });
      sgisSpatialQuery.spatialQueryUtil.getFeaturesByRegionCodesMicro(
        regioninfos,
        level,
        regiontype,
        serviceResult => {
          let result = serviceResult.result;
          if (result && result.features) {
            features = result.features;
            if (features.features.length) {
              features.features.map(item => {
                let code = item.properties.QH_CODE;

                item.properties["value"] = codeData[code];
                item.properties["name"] = item.properties["NAME"];
                // return item
              });
            }
            let data = that.mapdata.filterMapData;
            data.sort(function(a, b) {
              return a.value - b.value;
            });
            let max = data[data.length - 1].value;
            let min = data[0].value;
            //组装serise数据
            let seriesData = [];
            let mapObj = {
              name: "",
              type: "map",
              map: "mapJson",
              roam: true,
              geoIndex: 0,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              aspectScale: 1,
              data: data
            };
            if (
              this.selected.iden_num_codes.length == 1 ||
              !this.selected.iden_num_codes.length
            ) {
              seriesData.push(mapObj);
            } else {
              //查询区划经纬度
              let data = this.queryTableData;
              let regionCodes = [];
              let scatterData = [];
              data.tableData.map(item => {
                let obj = {};
                obj.name = item.NAME;
                obj.value = [];
                obj.visualMap = false;
                obj.value.push(
                  item[this.selected.iden_num_codes[1].idenCode]
                    ? item[this.selected.iden_num_codes[1].idenCode]
                    : "0"
                );
                scatterData.push(obj);
              });
              that.mapdata.filterMapData.map(item => {
                regionCodes.push(item.regioncode);
              });
              let req = {
                rcid: that.selectedSearchParams.regions.rcid,
                regionCodes: regionCodes
              };
              microAPI
                .getRegionInfo(req)
                .then(res => {
                  if (res.message == "success") {
                    let data = res.data;
                    data.map(item => {
                      scatterData.map(ite => {
                        if (ite.name == item.name) {
                          ite.value.unshift(item.y);
                          ite.value.unshift(item.x);
                        }
                        return ite;
                      });
                    });
                  }
                })
                .catch(error => {
                  console.log(error);
                });
              let obj = {
                type: "scatter",
                coordinateSystem: "geo",
                // symbol: "pin", //气泡
                symbol: "circle",
                symbolSize: function(val) {
                  let size = 30;
                  let item = (+val[2] / max) * 60;
                  if (item > 30 && item < 60) {
                    size = item;
                  }
                  if (item > 60) {
                    size = 60;
                  }
                  if (item < 30) {
                    size = 30;
                  }

                  return size;
                },
                tooltip: {
                  formatter: function(params) {
                    return params.name + ":" + params.value[2];
                  }
                },
                label: {
                  show: true,
                  normal: {
                    show: true,
                    textStyle: {
                      color: "#fff",
                      fontSize: 12
                    },
                    formatter: function(params) {
                      return params.value[2];
                    }
                  }
                },
                color: "red",
                itemStyle: {
                  color: "#FF8A3D",
                  borderColor: "#FF8A3D",
                  borderWidth: 3,
                  borderType: "solid"
                },
                zlevel: 6,
                data: scatterData
              };
              seriesData.push(mapObj);
              seriesData.push(obj);
            }
              var option = {
                title: {
                  text: that.mapdata.title,
                  subtext: "快速汇总",
                  left: "center",
                  top: "20"
                },
                tooltip: {
                  trigger: "item",
                  formatter: function(params) {
                    if (params.data) {
                      let data = params.data.data;
                      let text = `${params.name}</br>`;
                      for (let i in data) {
                        text +=
                          `${params.marker}${i}` + ":" + `${data[i]}</br>`;
                      }
                      return text;
                    } else {
                      return;
                    }
                  }
                },
                visualMap: {
                  min: min,
                  max: max,
                  left: 15,
                  bottom: 110,
                  text: ["高", "低"], // 文本，默认为数值文本
                  calculable: true,
                  inRange: {
                    color: ["#ace8f1","#107089"] // 蓝绿
                  }
                },
                geo: {
                  show: true,
                  aspectScale: 1,
                  roam: true,
                  map: "mapJson",
                  label: {
                    normal: {
                      show:true,
                      fontSize: "14",
                      color: "rgba(0,0,0,0.7)"
                    }
                  }
                },
                toolbox: {
                  right: 80,
                  top: 10,
                  feature: {
                    saveAsImage: {}
                  }
                },
                series: seriesData
              };
            setTimeout(() => {
              that.myChart = echarts.dispose(
                document.getElementById("collect-chart-container")
              );
              echarts.registerMap("mapJson", features);
              that.myChart = echarts.init(
                document.getElementById("collect-chart-container"),
                "macarons"
              );
              that.myChart.setOption(option, true);
            }, 600);
          }
        }
      );
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../css/rule.scss";
.collect {
  height: 100%;
  z-index: 1300;
  position: absolute;
  top: 0;
  width: 100%;
  background: #153a5b;
  .left {
    height:100%;
    .header {
      text-align: center;
      color: #ffffff;
      font-size: 18px;
      background-color: #107089;
      height: 60px;
      line-height: 60px;
      box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.3);
      i {
        float: left;
        font-size: 18px;
        line-height: 3.3;
        margin-left: 16px;
        margin-right: 40px;
        cursor: pointer;
      }
      p {
        cursor: pointer;
        text-align: left;
      }
    }
    .countTable{
      height: 82%;
      overflow: auto;
    }
    .btn-box {
      bottom: 17px;
      position: absolute;
      margin: 0 auto;
      left: 0;
      right: 0;
      text-align: center;
      button {
        width: auto;
        height: auto;
        background: rgba(29, 156, 183, 1);
        border-color: rgba(29, 156, 183, 1);
      }
    }
  }
  .right {
    position: absolute;
    width: calc(100vw - 301px);
    height: calc(100% - 40px);
    top: 0;
    background: $fontColorW;
    left: 301px;
    top: 40px;
    .header {
      display: inline-block;
      width: 100%;
      background: rgba(31,97,125,1);
      padding-left: 30px;
      width: calc(100vw - 331px);
      max-width: calc(100vw - 331px);
      p {
        float: left;
        color: rgba(255, 255, 255, 0.6);
        font-size: $fontColorW;
        line-height: 40px;
        height: 80px;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          list-style: none;
          // float: left;
          color: rgba(255, 255, 255, 0.6);
          margin-left: 19px;
          font-size: $fontSize;
          line-height: 40px;
          cursor: pointer;
        }
        li.active {
          color: $fontColorW;
        }
      }
    }
    .chart-box {
      width: 100%;
      height: auto;
      position: relative;
      #collect-chart-container {
        width: calc(100vw - 301px);
        height: calc(100vh - 120px);
      }
    }
  }
  .echartsStyle {
    position: absolute;
    right: 100px;
    top: 20px;
  }
  .pos {
    cursor: pointer;
    margin-right: 10px;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
@import "../../css/rule.scss";
.countTable {
  .el-table th.is-leaf {
    background: #153a5b;
  }
  .el-table {
    padding: 0 10px;
    background: #153a5b;
  }
  .el-table .cell {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
  }
  .el-table--enable-row-transition .el-table__body td {
    background: #153a5b;
  }
  .el-table td,
  .el-table th.is-leaf {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .el-table::before {
    background-color: transparent;
  }
  th .el-checkbox {
    display: none;
  }
  .el-checkbox__inner{
    border: 1px solid #1D9CB7;
    background-color: #fff0;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background: rgba(29,156,183,1);
    border-color: #1d9cb7;
  }
}
</style>
